<template>
    <view class="absolute bg-blackx w-full min-h-full box-border">
        <view class="flex justify-center pt-40 box-border" v-if="list.length==0 && status=='nomore'">
            <uv-empty mode="data"></uv-empty>
        </view>
        <view class="flex flex-col gap-4 p-4 box-border" v-else>
            <view class="w-full flex gap-2" v-for="i in list" :key="i.id">
                <uv-avatar :icon="i.user?.sex_name" randomBgColor></uv-avatar>
                <view class="flex flex-col gap-2 w-full items-start box-border overflow-hidden"
                    @click="toDetail(i?.post?.id)">
                    <text class="text-whitexlight text-base">{{i.avatar_nickname}}</text>
                    <view class="flex flex-row flex-wrap gap-2 items-center">
                        <text class="text-whitexlight text-sm">{{i.type_name}}</text>
                        <text class="text-whitexlight text-sm">{{i.created_at_human}}</text>
                        <text class="text-whitexlight text-sm">查看</text>
                    </view>
                    <view class="flex flex-col flex-wrap items-start">
                        <uv-text :lines="1" :text="i.content" :color="whitex"></uv-text>
                    </view>
                    <view v-if="i.to_comment?.content" class="w-full box-border">
                        <view
                            class="text-whitexlight text-sm leading-none border-0 border-l-4 border-blackxlight border-solid pl-1 truncate text-ellipsis">
                            {{i.to_comment?.content}}
                            {{i.to_comment?.content}}
                            {{i.to_comment?.content}}
                            {{i.to_comment?.content}}
                        </view>
                    </view>
                    <view v-else v-if="i.post?.content" class="w-full box-border">
                        <text
                            class="text-whitexlight text-sm leading-none border-0 border-l-4 border-blackxlight border-solid pl-1 truncate text-ellipsis">
                            {{i.post?.content}}
                        </text>
                    </view>
                </view>
            </view>
            <uv-load-more :status="status" @loadmore="onLoadMore" />
        </view>
    </view>
</template>

<script>
    import {
        colors
    } from '../../consts/colors';
    import {
        loadStatus
    } from '../../consts/datas';
    import {
        commentInbox,
    } from '../../http/api';
    export default {
        name: "commentInbox",
        data() {
            return {
                whitex: colors.whitex,
                form: {
                    page: 1,
                },
                last_page: 0,
                list: [],
                status: loadStatus.loadmore,
            }
        },
        methods: {
            toDetail(post_id) {
                if (!post_id) {
                    uni.showToast({
                        icon: 'none',
                        title: "发生错误,请截图发给客服处理,谢谢",
                    })
                    return
                }
                uni.navigateTo({
                    url: `/pages/detail/detail?id=${post_id}`,
                })
            },
            onLoadMore() {
                this.form.page += 1
                this.getData()
            },
            handleLoadMore() {
                if (this.form.page === this.last_page) {
                    this.status = loadStatus.nomore
                } else {
                    this.status = loadStatus.loadmore
                }
                console.log(this.status);
            },
            async getData() {
                const res = await commentInbox(this.form)
                const data = res.data
                this.last_page = data.last_page
                this.list = this.list.concat(data.data)
                this.handleLoadMore()
                console.log(res);
            },
        },
        mounted() {
            this.getData()
        }
    }
</script>

<style>

</style>